<template>
  <div>
    <div style="text-align: left">
      <el-button type="primary" @click="handleAddUserGroup">新增</el-button>
    </div>
    <div style="margin-top: 40px">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :row-style="{ height: '32px' }"
        :header-row-style="{ height: '10px' }"
        :cell-style="{ padding: '1px' }"
      >
        <el-table-column prop="id" label="分组 id"></el-table-column>
        <el-table-column prop="group_name" label="分组名"></el-table-column>
        <el-table-column prop="group_leader" label="组长"></el-table-column>
        <el-table-column prop="group_num" label="组员总数"></el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <i
              class="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
            ></i>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <i
              class="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <!-- 存放新增/编辑 -->
      <div v-show="showAddOrEdit">
        <GroupUserListAddOrEdit
          ref="groupuserlistaddoredit"
        ></GroupUserListAddOrEdit>
      </div>
    </div>
  </div>
</template>

<script>
import GroupUserListAddOrEdit from "./GroupUserListAddOrEdit";

export default {
  name: "GroupUserList",
  data() {
    return {
      showAddOrEdit: false,
      tableData: [],
    };
  },
  methods: {
    // 添加用户界面
    handleAddUserGroup() {
      this.showAddOrEdit = true;
      this.$refs.groupuserlistaddoredit.handleOpen(); // 调用子组件中的 open() 方法
    },
    handleEdit(index, row) {
      this.showAddOrEdit = true;
      this.$refs.groupuserlistaddoredit.handleOpen(row);
    },
    // 执行删除
    handleDelete(index, row) {
      // console.log(index, row.id);
      this.$confirm("此操作将删除该分组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.AXIOS.post(`/mycrmapi/user/group/del/${row.id}`)
          .then((res) => {
            // console.log(res.data.status);
            if (res.data.status === 1) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              // 刷新
              this.handleInitUserGroupListData();
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
              });
            }
          })
          .catch((err) => {
            this.$message({ type: "error", message: err });
          });
      });
    },
    handleInitUserGroupListData() {
      console.log(12);
      this.AXIOS.get(`/mycrmapi/user/grouplist`)
        .then((res) => {
          console.log(res.data.data);
          if (res.data.status === 1) {
            this.tableData = res.data.data;
          }
        })
        .catch((err) => {
          this.$message({ type: "error", message: err });
        });
    },
  },
  components: {
    GroupUserListAddOrEdit,
  },
  mounted() {
    this.handleInitUserGroupListData();
  },
};
</script>

<style scoped>
</style>
